<template>
  <div id="app">
    <div id="contain">
      <router-view></router-view>
    </div>
    
    <mt-tabbar fixed>
        <mt-tab-item>    
          <router-link to="/" exact active-class="active">
          <i class="iconfont icon-shouye"></i>
          <br>
              首页
          </router-link>       
        </mt-tab-item>
        <mt-tab-item>         
          <router-link to="/news" active-class="active">
          <i class="iconfont icon-xinwen-"></i>
          <br>
              新闻
          </router-link>
        </mt-tab-item>
        <mt-tab-item>          
          <router-link to="/product" active-class="active">
          <i class="iconfont icon-chanpin"></i>
          <br>
              产品
          </router-link>
        </mt-tab-item>
        <mt-tab-item>          
          <router-link to="/carts" active-class="active">
          <i class="iconfont icon-gouwuche1"></i>
          <br>
              购物车
          </router-link>
        </mt-tab-item>
        <mt-tab-item>          
          <router-link to="/my" active-class="active">
          <i class="iconfont icon-my"></i>
          <br>
              我的
          </router-link>
        </mt-tab-item>
    </mt-tabbar>
  </div>
</template>


<style>
    body{
        margin: 0;
        padding: 0;
    }
    .mint-header-title{
        font-size: 18px;
    }
    .mint-tabbar{
      border-top: 1px solid silver;
      height:40px;
    }
    .mint-tabbar > .mint-tab-item.is-selected{
       background-color:white;
       color:black;
    }
    .mint-tab-item{
      display: block;
      padding: 0;
    }
    .mint-tab-item-label{
      line-height: 20px;
      font-size: 14px;
    }
    .mint-tab-item-label a{
      text-decoration: none;
      color: gray;  
    }
    #contain{
      margin-top:40px;
      margin-bottom:45px;
    }
</style>



